import React, { Component } from 'react';
import { Icon, Switch, message, Divider, Modal,Input } from 'antd';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import {API_DOMAIN, WEB_DOMAIN} from '../../../utils/constants';

import TMTable from '../TMTable/Table';

import API from '../../../api/files/index';
const { Search } = Input;
const QRCode = require('qrcode.react');

class MyShare extends Component {
  state = {
    shareList: [],
    visibleOfQRCode: false,
    selectedShareURL: {},
  }

  getShareList = async () => {
    const response = await API.getShareList({ nickname: '', s: '' });
    const { code, data } = response;
    if (code === 1) {
      this.setState({
        shareList: data,
      });
    }
  }

  getShareSearch = async (param) => {
    const response = await API.getShareList({ nickname: param.nickname, s: '' });
    const { code, data } = response;
    if (code === 1) {
      this.setState({
        shareList: data,
      });
    }
  }

  componentWillMount () {
    this.getShareList();
  }

  modifyShare = async (share) => {
    const { id } = share;
    const { valid } = share.link;
    const params = {
      shareId: id,
      valid: !valid,
    };
    const response = await API.modifyShare(params);
    const { code } = response;
    if (code === 1) {
      message.success('操作成功');
      this.getShareList();
    }
  }
  handleCopy = (text, result) => {
    if (result) {
      message.success('复制成功');
    }
  }
  toggleQRCode = (record) => {
    this.setState({
      selectedShareURL: `${API_DOMAIN}/wechat/auth.htm?shareId=${record.id}&sharedBy=null`,
      visibleOfQRCode: true,
    });
  }

  deleteFile(shareId){
    const { confirm } = Modal;
    const self = this;
    confirm({
        title: '确认删除该文件？',
        content: '',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
            self.handleDeleteShare(shareId);
        },
        onCancel () {
        },
    });
}

  handleDeleteShare = async (shareId) => {
    const response = await API.deleteShare(shareId);
    const { code } = response;
    if (code === 1) {
      message.success('删除成功');
      this.getShareList();
    }
  }

   // 搜索点击事件
   handleSearch = (value) => {
    var param = {};
  // if(this.props.tabIndex == "1"){
  //       param.type = 'personal';
  // }else  if(this.props.tabIndex == "2"){
  //       param.type = 'team';
  // }
  param.nickname = value;
  if(value == ""){
    this.getShareList();
  }else{
    this.getShareSearch(param);
  }
}

  render () {
    var screenHeight = document.body.clientHeight;
    var screenWidth = window.screen.availWidth;
    const columns = [{
      title: '名称',
      key: 'nickname',
      dataIndex: 'nickname',
      width:'20%',
      render: (text, record) => {
        const { format } = record;
        let children = '';
        if (format === 'folder') {
          children = (<Icon type="folder" />);
        } else if (format === 'pdf') {
          children = (<Icon type="file-pdf" />);
        }
        return (
          <span>
            {children}
            <span style={{ marginLeft: 10 }}>{record.nickname}.{record.format}</span>
          </span>
        );
      },
    }, {
      title: '有效期',
      key: 'expire',
      dataIndex: 'expire',
      width:'15%',
      render: (text, record) => {
        const { expire } = record.link;
        return (
          expire ? <span>{expire}</span> : <span>永久有效</span>
        );
      },
    }, {
      title: '已查看次数',
      key: 'viewed',
      dataIndex: 'viewed',
      width:'10%',
      render: (text, record) => {
        const { viewed } = record.link;
        return (
          viewed ? <span>{viewed}</span> : <span>0</span>
        );
      },
    }, {
      title: '剩余次数',
      key: 'limited',
      dataIndex: 'limited',
      width:'8%',
      render: (text, record) => {
        const { limited } = record.link;
        return (
          limited === -1 ? <span>无限制</span> : <span>{limited}</span>
        );
      },
    }, {
      title: '分享链接',
      key: 'valid',
      dataIndex: 'valid',
      width:'10%',
      render: (text, record) =>
        (
          <Switch
            onChange={() => this.modifyShare(record)}
            checked={record.link.valid}
          />
        ),
    }, {
      title: '操作',
      key: 'operate',
      dataIndex: 'operate',
      width:'17%',
      render: (text, record) => {
        // const url = `${WEB_DOMAIN}/fileShareMobile?shareId=${record.id}`;
        const url = `${API_DOMAIN}/wechat/auth.htm?shareId=${record.id}&sharedBy=null`;
        return (
          <span>
            <CopyToClipboard
              onCopy={this.handleCopy}
              text={url}
            >
              <span>复制链接</span>
            </CopyToClipboard>
            <Divider type="vertical" />
            <a role="button" tabIndex="-1" onClick={() => this.toggleQRCode(record)}>二维码</a>
            <Divider type="vertical" />
            <a role="button" tabIndex="0" onClick={() => this.deleteFile(record.id)}>删除</a>
          </span>
        );
      },
    }];
    return (
      <div>
        <Modal
          width={176}
          closable={false}
          destroyOnClose
          visible={this.state.visibleOfQRCode}
          footer={null}
          onCancel={() => { this.setState({ visibleOfQRCode: false }); }}
        >
          <QRCode value={this.state.selectedShareURL} />
        </Modal>
        <Search placeholder="文件名/文件夹名/标签/客户名称" enterButton="查询" size="large" style={{float:'right',width:400,marginBottom:12,marginTop:20,marginRight:15}}  onSearch={this.handleSearch} />
        <TMTable scroll={{y:screenHeight-385}} columns={columns} dataSource={this.state.shareList} />
      </div>
    );
  }
}

export default MyShare;
